<template>
  <div class="container">
    <div class="topSearch">
      <div class="top">
        <span>说明：目前支持学科和关键字条件筛选</span>
        <el-button
          type="success"
          icon="el-icon-edit"
          @click="$router.push('/questions/new?type=questions')"
          >新增试题</el-button
        >
      </div>
      <div class="buttom">
        <el-form
          ref="checkForm"
          :model="serachForm"
          label-width="100px"
          :inline="true"
          hide-required-asterisk
          :rules="rules"
        >
          <div class="search">
            <div class="item">
              <el-form-item label="学科" prop="subjectID">
                <el-select
                  v-model="serachForm.subjectID"
                  placeholder="请选择"
                  class="allHold"
                  @change="changeSubject"
                >
                  <el-option
                    :label="item.subjectName"
                    :value="item.id"
                    v-for="item in subjectAll"
                    :key="item.id"
                    @click.native="chooseSecond(item)"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="item">
              <el-form-item label="二级目录">
                <el-select v-model="serachForm.catalogID" placeholder="请选择">
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="item in catalogTemID"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="item">
              <el-form-item label="标签">
                <el-select v-model="serachForm.tags" placeholder="请选择">
                  <el-option
                    :label="item.tagName"
                    :value="item.tagName"
                    v-for="item in tagsAll"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="item">
              <el-form-item label="关键字">
                <el-input v-model="serachForm.keyword"></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="search">
            <div class="item">
              <el-form-item label="试题类型">
                <el-select
                  v-model="serachForm.questionType"
                  placeholder="请选择"
                >
                  <el-option label="单选" value="1"></el-option>
                  <el-option label="多选" value="2"></el-option>
                  <el-option label="简单" value="3"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="item">
              <el-form-item label="难度">
                <el-select v-model="serachForm.difficulty" placeholder="请选择">
                  <el-option label="简单" value="1"></el-option>
                  <el-option label="一般" value="2"></el-option>
                  <el-option label="困难" value="3"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="item">
              <el-form-item label="方向">
                <el-select v-model="serachForm.direction" placeholder="请选择">
                  <el-option
                    :label="item"
                    :value="item"
                    v-for="item in direction"
                    :key="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="item">
              <el-form-item label="录入人">
                <el-select
                  v-model="serachForm.creatorID"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    :label="item.username"
                    :value="item.id"
                    v-for="item in inputUser"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>

          <div class="searchThird">
            <div class="item">
              <el-form-item label="题目备注">
                <el-input v-model="serachForm.remarks"></el-input>
              </el-form-item>
            </div>
            <div class="item">
              <el-form-item label="企业简称">
                <el-input v-model="serachForm.shortName"></el-input>
              </el-form-item>
            </div>
            <div class="item" style="display: flex">
              <el-form-item label="城市">
                <el-select
                  v-model="serachForm.province"
                  placeholder="请选择"
                  style="width: 100px"
                >
                  <el-option
                    :label="item"
                    :value="item"
                    v-for="item in provinces"
                    :key="item"
                    @click.native="chooseCity(item)"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-select
                v-model="serachForm.city"
                placeholder="请选择"
                style="width: 100px"
              >
                <el-option
                  :label="item"
                  :value="item"
                  v-for="item in city"
                  :key="item"
                >
                </el-option>
              </el-select>
            </div>
            <div class="item" style="text-align: right">
              <el-button style="margin-left: 100px" @click="clearMethods"
                >清除</el-button
              >
              <el-button type="primary" @click="searchList">搜索</el-button>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { list } from '../../api/hmmm/subjects'
import { reqGetUsers } from '../../api/hmmm/questions'
import { list as tagList } from '../../api/hmmm/tags'
import { provinces, citys } from '../../api/hmmm/citys'
import { simple } from '../../api/hmmm/directorys'
export default {
  name: 'TopSearch',
  data () {
    return {
      serachForm: {
        subjectID: '',
        difficulty: '',
        questionType: '',
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: ''
      },
      rules: {
        subjectID: [
          {
            required: true,
            message: '学科不能为空',
            trigger: ['blur', 'change']
          }
        ]
      },
      subjectAll: [],
      tagsAll: [],
      direction: [
        'o2o',
        '外包服务',
        '企业服务',
        '互联网金融',
        '企业咨询',
        '互联网',
        '电子商务',
        '其他'
      ], // 方向
      inputUser: [], // 录入人
      provinces: [], // 所有城市
      city: [], // 当前城市的地区
      catalogTemID: []
    }
  },
  created () {
    this.getSubjectList()
    this.getUsers()
    this.getAllCity()
  },
  methods: {
    // 获取科目列表
    async getSubjectList () {
      const res = await list({ page: 1, pagesize: 999999999 })
      this.subjectAll = res.data.items
      console.log(res, '科目列表')
    },
    // 选择二级
    async chooseSecond (item) {
      const res = await simple({ subjectID: item.id })
      this.catalogTemID = res.data

      this.getTags(item)
    },
    // subject改动后标签的清空
    changeSubject () {
      this.serachForm.tags = ''
      this.serachForm.catalogID = ''
    },
    // 标签联动
    async getTags (item) {
      const res = await tagList(item)
      console.log(res, '标签联动')
      this.tagsAll = res.data.items
    },
    // 用户列表用于录入人
    async getUsers () {
      const res = await reqGetUsers({
        page: 1,
        pagesize: 99999999,
        keyword: this.serachForm.keyword
      })
      console.log(res, '55555555555555555555555555')
      this.inputUser = res.data.list
      // console.log(res)
    },
    // 获取所有城市
    getAllCity () {
      this.provinces = provinces()
    },
    // 获取区域
    chooseCity (pname) {
      this.city = citys(pname)
      this.serachForm.city = ''
    },
    // 清除当前搜索内容
    clearMethods () {
      this.serachForm = {
        subjectID: '',
        difficulty: '',
        questionType: '',
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: ''
      }
      // 清除完之后，重新获取下方列表
      this.$emit('reload')
      // 清除所有规则
      this.$refs.checkForm.resetFields()
    },
    // 搜寻满足要求的列表
    searchList () {
      this.$refs.checkForm.validate((boo) => {
        if (!boo) return
        this.$emit('searchListByCommand', this.serachForm)
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.top {
  display: flex;
  justify-content: space-between;
  span {
    color: pink;
  }
}
.buttom {
  margin-top: 10px;
}
::v-deep {
  .el-form-item__label {
    font-weight: 700 !important;
  }
  .el-select {
    width: 100%;
  }
  .search,.searchThird {
    display: flex;
    .item {
      flex: 1;
      .el-form-item {
        display: flex;
        .el-form-item__content {
          flex: 1;
        }
      }
    }
  }

}
</style>
